<template>
  <NvCrud v-model:form="form" :option :data @row-update="handleSave" />
</template>

<script setup lang="ts">
import type { NvCrudOption } from 'nv-crud'
import { NvCrud } from 'nv-crud'
import { ref } from 'vue'

interface Data { name?: string, province?: string }

const form = ref<Data>({})

const data = ref<Data[]>([{ name: '张三', province: '150000' }])

function handleSave(done: (close: boolean) => void) {
  setTimeout(() => {
    data.value[0] = form.value
    done(true)
  }, 1000)
}

const baseUrl = 'https://api.avuejs.com/area'
const option: NvCrudOption<Data> = {
  actionbar: false,
  toolbar: false,
  fields: {
    name: {
      title: '姓名',
    },
    province: {
      title: '省份',
      type: 'select',
      dict: `${baseUrl}/getProvince`,
      props: {
        valueField: 'code',
        labelField: 'name',
      },
    },
  },
}
</script>
